import { useEffect, useState } from 'react';
import { Obj } from 'esy-ui';
import { observer } from 'mobx-react-lite';
import { Header, Img } from '@/components';
import { ssGetJsonItem, ssSetJsonItem } from '@/utils';
import { useUserInfoStore } from '@/mobx';
import { useFormatText } from '@/hooks';
import { typeMap } from './List';

function FeedbackDetail() {
  const [info, setInfo] = useState<Obj>({});
  const { userInfo } = useUserInfoStore();
  const { text } = useFormatText();

  useEffect(() => {
    const data = ssGetJsonItem('feedback-detail');
    if (data) {
      setInfo(data);
    }
    return () => {
      ssSetJsonItem('feedback-detail', '');
    };
  }, []);

  // 媒体文件
  // const medieList = useMemo(() => {
  //   let arr: Obj[] = [];
  //   if (info?.MediaJson) {
  //     arr = JSON.parse(info.MediaJson);
  //   }
  //   return arr;
  // }, [info]);

  // const toLink = (info: Obj) => {
  //   if (info.JumpUrl) navigation(info.JumpUrl);
  // };

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title='text_208' />
      <div className='bg-white mx-4 my-3 p-3 rounded-xl'>
        <div className='flex items-center justify-between'>
          {userInfo?.HeadImg ? (
            <Img boxClassName='w-6 h-6' src={userInfo?.HeadImg} />
          ) : (
            <div className='w-8 h-8 rounded-half bg-color-19 flex justify-center items-center text-color-21'>{userInfo?.NickName.slice(0, 1)}</div>
          )}
          <div className='flex-1 ml-2.5 flex flex-col gap-1'>
            <div className='text-base'>{text(typeMap[info?.Type])}</div>
            <div className='text-xs text-bar'>{info?.InsertTime}</div>
          </div>
        </div>
        <div className='text-sm leading-6 text-desc mt-2 pt-2 border-t border-solid whitespace-pre-line break-words'>{info?.Describe}</div>
      </div>

      {/* <div className='bg-white mx-4 my-3 p-3 rounded'>
        <div className='flex items-center justify-end'>
          <div className='mr-2.5 flex flex-col gap-1 text-right'>
            <div className='text-sm font-bold'>{info?.Title}</div>
            <div className='text-xs text-desc'>{info?.InsertTime}</div>
          </div>
          {userInfo?.HeadImg ? (
            <Img boxClassName='w-8 h-8' src={userInfo?.HeadImg} />
          ) : (
            <div className='w-8 h-8 rounded-half bg-color-19 flex justify-center items-center text-color-21'>{userInfo?.NickName.slice(0, 1)}</div>
          )}
        </div>
        <div className='text-xs text-desc mt-2 pt-2 border-t border-solid whitespace-pre-line break-words'>{info?.Describe}</div>
      </div> */}
    </div>
  );
}

export default observer(FeedbackDetail);
